.loading-cover-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.loading-cover {
    text-align: center;
    position: absolute;
    background-color: var(--colorPageBackground);
    width: 100%;
    height: 100%;
    white-space: nowrap;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

.loading-image {
  display: block;

  -webkit-animation: saturate 4s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: saturate 4s; /* Firefox < 16 */
      -ms-animation: saturate 4s; /* Internet Explorer */
       -o-animation: saturate 4s; /* Opera < 12.1 */
          animation: saturate 4s;
}

@keyframes saturate {
  0% {
    filter: saturate(0);
    -webkit-filter: saturate(0);
  }
  50% {
    filter: saturate(0);
    -webkit-filter: saturate(0);
  }
  100%   {
    filter: saturate(1);
    -webkit-filter: saturate(1);
  }
}

@-moz-keyframes saturate {
  0%   { filter: saturate(0); }
  50%  { filter: saturate(0); }
  100% { filter: saturate(1); }
}

@-webkit-keyframes saturate {
  0%   { -webkit-filter: saturate(0); }
  50%  { -webkit-filter: saturate(0); }
  100% { -webkit-filter: saturate(1); }
}

@-o-keyframes saturate {
  0%   { -webkit-filter: saturate(0); }
  50%  { -webkit-filter: saturate(0); }
  100% { -webkit-filter: saturate(1); }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { filter: saturate(0); }
    to   { filter: saturate(1); }
}


/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
